<template>
    <view class="allPage">



    </view>
</template>

<script>

const app = getApp();


const partBackColor = ['#fef5e3','#fdeded','#f6fef6','#eaeaae']
export default {
    components: {},
    data () {
        return {

          
        }
    },
    onShow(){
     
    },
    onLoad () {

    
     
    },
    onPageScroll (e) {

     
        

    },
    onReachBottom (e) {
      
    },
    computed:{
     
    },
    methods: {
        //获取超市详情
        getShopDetail () {

            // "'"+ this.supermarketId  +"'"
            this.$axios({ url: 'flash/supermarket/get', data: this.supermarketId })
                .then(res => {

                    let shopJson = res.data

                    this.pageTitle = shopJson.name

                    this.villName = this.$store.getters.villageInfo.name + '店'



                    //广告图
                    if (shopJson.advertisingPic) {

                        let advertisingPicLinks = shopJson.advertisingPicLinks ? shopJson.advertisingPicLinks.split(';') : []

                        this.imgUrls = shopJson.advertisingPic.split(';').map((item, idx) => {

                            return {
                                url: this.$getImg(item, 1),
                                isChange: idx,
                                color: idx == 0 ? '#78d173' : idx == 1 ? '#d2a0e9' : '#fd5d50',
                                links:advertisingPicLinks[idx]
                            }

                        })


                        // this.mainColor = this.imgUrls[0].color

                    }

                })

        },
        //获取商品类别
        initClassifyPage (cb) {


     
            this.$axios({ url: 'flash/supermarket/classify/page/list?loading', type: 'Post', data: { "pageNum": 1, "pageSize": 10000,"onlyShowHaveGoodsClassfiy":1, "supermarketId": this.supermarketId,commonStatusList:[1] } })
            .then(res => {

                    // console.log('不对么',res)

                    let dataAll = res.data

                    //获取所有的二级分类
                    let secondClassifyProduct = []
                    //获取推荐的分类
                    let recommendedClassify = dataAll.filter((item,idx) => {

                        item.picSrc = this.$getImg(item.pic)

                        if(item.pid == 0){

                            this.$set(item,'nums',0)
                            this.$set(item,'level',1)
                        }
                        else{

                            secondClassifyProduct = secondClassifyProduct.concat(item.children)

                        }

                        return item.isRecommended == 1
                    })

                    this.secondClassifyProduct = secondClassifyProduct


                    this.categoryListAll = handleTree(dataAll, 'id', 'pid')
           
                    this.dataClassifyAll = dataAll
                    

                    // let secondClassifyProduct = []

                    // this.categoryListAll.map(item => {

                    //     if (item.children) {
                    //         secondClassifyProduct = secondClassifyProduct.concat(item.children)
                    //     }

                    //     this.$set(item,'nums',0)
                    //     this.$set(item,'level',1)

                    // })

                    // this.secondClassifyProduct = secondClassifyProduct



                    this.productListArr = recommendedClassify.map( (item,idx) =>{

                        item.backColor = partBackColor[ idx % partBackColor.length ]

                        return item

                    })

                    //推荐的商品类别
                 
                    this.$nextTick(()=>{

                        this.$refs['myClassify'].initActiveFunc( this.categoryListAll)

                    })


                    

                    cb && cb()

                })
        },
       
        swiperChange (e) {

            // console.log('99999999',e)

            let current = e.detail.current

            // this.mainColor = this.imgUrls[current].color
        },
        //显示类别数量的多少
        classifyNums( selectProductObj ){

            //console.log('没执行么')

            let keys = Object.keys( selectProductObj )

            let newObj = {}

            if(keys.length > 0){

                keys.map( key =>{


                    let selectItem = selectProductObj[key]

                    newObj[selectItem.firstClassify] = ( newObj[selectItem.firstClassify]  || 0 ) + selectItem.count

                   
                })

            }
    
            this.categoryListAll.map( item =>{

                if(newObj[item.id]){

                    this.$set(item,'nums', newObj[item.id] )
                }
                else{
                    this.$set(item,'nums', 0)
                }
            })

            

        },
        //获取元素位置
        getScrollPosition (ele, cb) {

            const query = uni.createSelectorQuery().in(this);
            query.select(ele).boundingClientRect(data => {
                // console.log("得到布局位置信息" + JSON.stringify(data));
                // console.log("节点离页面顶部的距离为", data);

                cb && cb(data)

            }).exec();

        },

        goProductPage () {

            this.$goNext('/pages/product/index')
        },
        goSearch () {
            this.$goNext('/pages/search/index')
        },
        //提交前
        beforSubmitFunc(){

            let bool = this.$refs['VailMember'].handleVailFunc()

            if( bool ){

                this.$goNext('/pages/supermarket/order/index?supermarketId='+this.supermarketId)

            }

        },
        //点击广告图
        goProductCate(row){

            if( row.links){

                let json = this.dataClassifyAll.find(someItem => someItem.id == row.links)

                // console.log('999999999999999123',json)

                this.$refs['myClassify'] && this.$refs['myClassify'].recommonHandle( json )

            }

            
        },
        //点击了推荐类别
        clickClassif( row ){

            // console.log('999999999999999',row)

            this.$refs['myClassify'] && this.$refs['myClassify'].recommonHandle( row )

        }

    }
}
</script>

<style scoped lang="scss">
.allPage {
    background: #fff;
}
.pageHead {
    // padding-bottom: 100rpx;

    .mySwiper {
        box-sizing: border-box;
        height: 180rpx;
        margin: 10rpx 0rpx;
        .shuffing-item {
            width: 100%;
            height: 180rpx;
            transition: all 0.3s;
            border-radius: 10px;
            image {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 10px;
            }
        }
    }
}
.s-head {
    width: 100%;
    .headName {
        font-size: 40rpx;
        width: 100%;
    }
    .head-ipt {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
    }
    .iptBox {
        display: flex;
        height: 68rpx;
        line-height: 68rpx;
        background-color: #f1f1f1;
        border-radius: 10rpx;
        padding: 0 20rpx 0 20rpx;
        border: 1rpx solid #eaeaea;

        .holderclass {
            color: rgba(0, 0, 0, 0.6);
            font-size: 26rpx;
            overflow: hidden;
            white-space: nowrap;
            width: 300rpx;
        }
        .icon {
            text-align: center;
            color: #565656;
            font-size: 38rpx;
            font-weight: bold;
        }
    }
    &.allTop {
        width: 100%;
        padding: 10rpx 30rpx 0;
        .head-ipt {
            position: relative;
            width: 100%;
        }
        .iptBox {
            width: 100%;
            .holderclass {
                width: 100%;
            }
        }
        .search-btn {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 1;
            width: 150rpx;
            height: 100%;
            background: #ff7c8d;
            color: #fff;
            border-radius: 60rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
        }
    }
}
.head {
    box-sizing: border-box;
    position: relative;
    padding: 20rpx 30rpx 0;
    // margin-top: -170rpx;
    .head-bg {
        image {
            width: 100%;
            height: 300rpx;
            line-height: 300rpx;
            text-align: center;
            border-radius: 4px;
        }
    }
    .banner-head {
        // background: #fff;
        border-radius: 10px;
        // padding-top: 20rpx;
        // box-shadow: 0 0 1px #eaeaea;
    }
    .swiper-ser {
        // margin-top: 30rpx;
        height: 100rpx;
        white-space: nowrap;
        &.big {
            height: 300rpx;
           
        }
    }
    .service {
        height: 100rpx;
        display: inline-block;
        vertical-align: top;
        & + .service {
            margin-left: 30rpx;
        }
    }
    
    .service-item {
        height: 80rpx;
        padding:20rpx;
        background: #fef5e3;
        display: flex;
        align-items: center;
        width: 200rpx;
        box-sizing: border-box;
        border-radius: 18rpx;
       
        .icon-img {
            width: 60rpx;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            margin-right: 14rpx;
        }
    }
    
}
</style>
